<!doctype html>
<html lang="zh-Hans-CN">
<head>
    <meta http-equiv="content-type" content="textml" charset="utf-8">
    <title>小米导航栏-成品</title>
    <meta name="Keywords" content="小米,菜单">
    <meta name="Description" content="小米导航菜单">
    <link rel="stylesheet" href="css/header.css" />
    <link rel="stylesheet" href="css/content - branch1.css" />
    <link rel="stylesheet" href="css/bgpic.css" />
    <script src="js/main.js"></script>
</head>
<body>
    <header>
        <div id='title-area'>
            <ul>
                <li>
                   <div class='tips'></div>
                   <span>主题: 小米导航菜单</span>
                </li>
                <li>
                   <div class='tips'></div>
                   <span>邮箱: socovo@live.com</span>
                </li>
                <li>
                   <div class='tips'></div>
                   <span>姓名: 宋臣</span>
                </li>
            </ul>
        </div>
    </header>
    <content>
        <div id='nav-area'>
            <div id='bgpic-box'>
                <ul>
                    <li class='bgpic-list'>
                        <input type='radio' name='radio-btn' id='radio-first' checked>
                        <img src='images/pictures/1.jpg' alt='小米8周年' width='2452' height='920'>
                        <label for='radio-sixth' class='prev'><span>&lt;</span></label>
                        <label for='radio-second' class='next'><span>&gt;</span></label>
                    </li>
                    <li class='bgpic-list'>
                        <input type='radio' name='radio-btn' id='radio-second'>
                        <img src='images/pictures/2.jpg' alt='小米8周年' width='2452' height='920'>
                        <label for='radio-first' class='prev'><span>&lt;</span></label>
                        <label for='radio-third' class='next'><span>&gt;</span></label>
                    </li>
                    <li class='bgpic-list'>
                        <input type='radio' name='radio-btn' id='radio-third'>
                        <img src='images/pictures/3.jpg' alt='小米8周年' width='2452' height='920'>
                        <label for='radio-second' class='prev'><span>&lt;</span></label>
                        <label for='radio-forth' class='next'><span>&gt;</span></label>
                    </li>
                    <li class='bgpic-list'>
                        <input type='radio' name='radio-btn' id='radio-forth'>
                        <img src='images/pictures/4.jpg' alt='小米8周年' width='1226' height='460'>
                        <label for='radio-third' class='prev'><span>&lt;</span></label>
                        <label for='radio-fifth' class='next'><span>&gt;</span></label>
                    </li>
                    <li class='bgpic-list'>
                        <input type='radio' name='radio-btn' id='radio-fifth'>
                        <img src='images/pictures/5.jpg' alt='小米8周年' width='1226' height='460'>
                        <label for='radio-forth' class='prev'><span>&lt;</span></label>
                        <label for='radio-sixth' class='next'><span>&gt;</span></label>
                    </li>
                    <li class='bgpic-list'>
                        <input type='radio' name='radio-btn' id='radio-sixth'>
                        <img src='images/pictures/6.jpg' alt='小米8周年' width='2452' height='920'>
                        <label for='radio-fifth' class='prev'><span>&lt;</span></label>
                        <label for='radio-first' class='next'><span>&gt;</span></label>
                    </li>
                </ul>
            </div>
            <div id='nav'>
                <ul>
                    <li class='submenu'>
                        <a href='#'>手机 电话卡</a>
                        <span class='arrow'></span>
                        <div id='page1' class='page'></div>
                    </li>
                    <li class='submenu'>
                        <a href='#'>电视 盒子</a>
                        <span class='arrow'></span>
                        <div id='page2' class='page'></div>
                    </li>
                    <li class='submenu'>
                        <a href='#'>笔记本</a>
                        <span class='arrow'></span>
                        <div id='page3' class='page'></div>
                    </li>
                    <li class='submenu'>
                        <a href='#'>智能 家电</a>
                        <span class='arrow'></span>
                        <div id='page4' class='page'></div>
                    </li>
                    <li class='submenu'>
                        <a href='#'>健康 家居</a>
                        <span class='arrow'></span>
                        <div id='page5' class='page'></div>
                    </li>
                    <li class='submenu'>
                        <a href='#'>出行 儿童</a>
                        <span class='arrow'></span>
                        <div id='page6' class='page'></div>
                    </li>
                    <li class='submenu'>
                        <a href='#'>路由器 手机配件</a>
                        <span class='arrow'></span>
                        <div id='page7' class='page'></div>
                    </li>
                    <li class='submenu'>
                        <a href='#'>移动电源 插线板</a>
                        <span class='arrow'></span>
                        <div id='page8' class='page'></div>
                    </li>
                    <li class='submenu'>
                        <a href='#'>耳机 音箱</a>
                        <span class='arrow'></span>
                        <div id='page9' class='page'></div>
                    </li>
                    <li class='submenu'>
                        <a href='#'>生活 米兔</a>
                        <span class='arrow'></span>
                        <div id='page10' class='page'></div>
                    </li>
                </ul>
            </div>
            <div id='review'>
            </div>
        </div>
    </content>
    <footer></footer>
</body>
</html>